﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<!-- saved from url=(0013)about:internet -->
	<head>
		<title>Animated InnerFade with jquery</title>
		<!-- //
		
		____________________________________________
		
		Gestaltung und XHTML-Programmierung
		
		Medienfreunde GbR
		Arthur-Hoffmann-Stra?e 47 HH
		04107 Leipzig
		
		+49 341 2 27 96 99
		www.medienfreunde.com
		____________________________________________
		animated version : 
		OpenStudio
		Download by http://sc.xueit.com
		le bourg
		43160 Saint Pal de Senouire
		+33 4 71 00 10 75
		www.openstudio.fr
		____________________________________________
		
		-->
		
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="imagetoolbar" content="no" />

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.animated.innerfade.js"></script>
		<script type="text/javascript">
	   $(document).ready(
				function(){
					

					$('ul#animated-panorama').animatedinnerfade({
						speed: 2000,
						timeout: 15000,
						type: 'sequence',
						containerheight: '300px',
						containerwidth: '600px',
						animationSpeed: 15000,
						animationtype: 'fade',
						bgFrame: 'img/frame.png',
	                                        controlBox: 'none',
						controlBoxClass: 'mycontrolboxclass',
	                                        controlButtonsPath: 'img',
                                                displayTitle: 'yes' 
					});

$('ul#animated-portfolio').animatedinnerfade({
						speed: 1000,
						timeout: 5000,
						type: 'random',
						containerheight: '300px',
						containerwidth: '270px',
						animationSpeed: 5000,
						animationtype: 'fade',
						bgFrame: 'none',
						controlBox: 'none',
						displayTitle: 'none'
					});
			});
  	</script>

	<style>
		.innerfade-title{
        		position: absolute;
        		bottom: 20px;
        		left: 0;
        		z-index: 290;
        		width: 100%;
        		background: #00a7ee url(img/title-bg.png);
        		height: 34px;
        		filter:alpha(opacity=80);
        		-moz-opacity: 0.8;
        		opacity: .8;
        		border-top: 1px solid white;
		}
		.innerfade-title h2{
		        color: white;
		        font-weight: bold;
        		margin-top: 0;
        		margin-bottom: 0;
       			text-align: center;
        		font-family: Arial;
        		font-size: 16px;
        		font-style: italic;
        		line-height: 34px;
		}
		.mycontrolboxclass{
			position: absolute;
			right: 35px;
			top: 20px;
		}
		.bg-frame img { behavior: url(win_png.htc); }
	</style>
				
	</head>
	<body>				
	<h1>Animated Innerfade for jQuery</h1>

	<p>Online documentation : <a href="http://www.openstudio.fr/Animated-InnerFade-with-JQuery.html">http://www.openstudio.fr/Animated-InnerFade-with-JQuery.html</a></p>

	<h2>Exemple 1 : portfolio</h3>

				<ul id="animated-portfolio">					
					<li>
						<a href="http://www.cc-plateau-chaisedieu.fr"><img src="images/cc-chaisedieu.jpg" alt="cc-chaise-dieu" title="Communaut&eacute; de communes du Plateau de la Chaise-Dieu" width="400" height="411" /></a>
					</li>
					<li>
						<a href="http://www.casadart.fr"><img src="images/casadart.jpg" alt="OpenStudio" title="Casa d'Art" width="400" height="335" /></a>
					</li>
					<li>
						<a href="http://www.3bm.fr"><img src="images/3bm.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis l'h&ocirc;tel de r&eacute;gion" width="400" height="411" /></a>
					</li>	
                                        <li>
						<a href="http://www.aupanierdauvergne.fr"><img src="images/aupanierdauvergne.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis l'h&ocirc;tel de r&eacute;gion" width="400" height="425" /></a>
					</li>	
								
				</ul>

	<h2>Exemple 2 : panoramic views</h3>
				<ul id="animated-panorama">					
					<li>
						<a href="http://www.openstudio.fr"><img src="images/statue2.jpg" alt="openstudio" title="Le Puy en Velay, Auvergne - vue depuis la statue Notre Dame" width="1373" height="375" /></a>
					</li>
					<li>
						<a href="http://www.openstudio.fr"><img src="images/vue-puy-en-velay2-375.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis le Rocher Corneille" width="1739" height="375" /></a>
					</li>
					<li>
						<a href="http://www.openstudio.fr"><img src="images/vue-puy-en-velay4-375.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis l'h&ocirc;tel de r&eacute;gion" width="2099" height="375" /></a>
					</li>	
								
				</ul>
			</div>
		
		<noscript>
	    <div id="att">
	    	<p>Sorry, you need to activate JavaScript in your browser.</p>
	    </div>
    </noscript>					
	</body>
</html>
